<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> New Document </title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://apps.bdimg.com/libs/d3/3.4.8/d3.min.js"  charset="utf-8"></script>

  <style>
  .chart div {
	  font: 10px sans-serif;
	  background-color: steelblue;
	  text-align: right;
	  padding: 3px;
	  margin: 1px;
	  color: white;
	}

  </style>
 </head>
 <body>
 <!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->


  <div class="chart"></div>
  <script type="text/javascript">
    var data = [4, 8, 15, 16, 23, 42];

	var x = d3.scale.linear()
		.domain([0, d3.max(data)])
		.range([0, 420]);

	d3.select(".chart")
	  .selectAll("div")
		.data(data)
	  .enter().append("div")
		.style("width", function(d) { return x(d) + "px"; })
		.text(function(d) { return d; });
  </script>

 </body>
</html>